<template>
  <!-- mobile -->
  <TransitionRoot as="template" :show="sidebarOpen">
    <Dialog as="div" class="fixed inset-0 flex z-40 md:hidden" @close="sidebarOpen = false">
      <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
      </TransitionChild>
      <TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
        <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
          <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
            <div class="absolute top-0 right-0 -mr-12 pt-2">
              <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" @click="sidebarOpen = false">
                <span class="sr-only">Close sidebar</span>
                <XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
              </button>
            </div>
          </TransitionChild>
          <div class="flex-shrink-0 flex items-center px-4 space-x-3">
            <img :src="img200" class="h-8 inline"/>
            <span class="font-extrabold text-xl text-gray-800">ECR DOC</span>
          </div>
          <div class="mt-5 flex-1 h-0 overflow-y-auto">
            <nav class="px-2 space-y-1">
              <!-- 手机端 -->
              <router-link
                v-for="item in navigation"
                :key="item.name"
                :to="item.href"
                :class="[
                  item.current ? 
                    'bg-gray-100 text-gray-900' : 
                    'text-gray-600 hover:bg-gray-50 hover:text-gray-900', 
                  'group flex items-center px-2 py-2 text-base font-medium rounded-md'
                ]"
                @click="sidebarOpen = false"
              >
                <component :is="item.icon" :class="[item.current ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500', 'mr-4 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
                {{ item.name }}
              </router-link>

            </nav>
          </div>
        </div>
      </TransitionChild>
      <div class="flex-shrink-0 w-14" aria-hidden="true">
        <!-- Dummy element to force sidebar to shrink to fit close icon -->
      </div>
    </Dialog>
  </TransitionRoot>

  <!-- Static sidebar for desktop -->
  <div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
    <!-- Sidebar component, swap this element with another sidebar if you like -->
    <div class="flex flex-col flex-grow border-r border-gray-200 pt-5 bg-white overflow-y-auto">
      <div class="flex items-center flex-shrink-0 px-4 space-x-3">
        <img :src="img200" class="h-8 inline"/>
        <span class="font-extrabold text-xl text-gray-800">ECR DOC</span>
      </div>
      <div class="mt-5 flex-grow flex flex-col">
        <nav class="flex-1 px-2 pb-4 space-y-1">
          <!-- 菜单 :href="item.href" -->
          <router-link
            v-for="item in navigation"
            :key="item.name"
            :to="item.href"
            :class="[
              item.current ? 
                'bg-gray-100 text-gray-900' : 
                'text-gray-600 hover:bg-gray-50 hover:text-gray-900', 
              'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
            ]"
            aria-hidden="true"
          >
            <component :is="item.icon" :class="[item.current ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500', 'mr-3 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
            {{ item.name }}
          </router-link>

        </nav>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import {
  Dialog,
  DialogOverlay,
  TransitionChild,
  TransitionRoot,
} from '@headlessui/vue'
import {
  HomeIcon,
  DocumentIcon,
  DeviceTabletIcon,
  ChatBubbleBottomCenterTextIcon,
  XMarkIcon,
} from '@heroicons/vue/24/outline'
// 模板
import img200 from "@/assets/200x200.png"

const props = defineProps({
  sidebarOpenInit: {
    type: Boolean,
    required: true,
    default: true
  },
})
const emit = defineEmits(['sidebarOpenChange'])

const route = useRoute()

const navigation = ref([
  { name: 'Dashboard', href: '/home', icon: HomeIcon, current: true },
  { name: 'Documents', href: '/document', icon: DocumentIcon, current: false },
  //{ name: 'Terminal Model', href: '/termodel', icon: DeviceTabletIcon, current: false },
  { name: 'Terminal', href: '/terminal', icon: DeviceTabletIcon, current: false },
  { name: 'ChatGPT Record', href: '/chatgpt-record', icon: ChatBubbleBottomCenterTextIcon, current: false },
])

const sidebarOpen = ref(props.sidebarOpenInit)

watchEffect(() => {
  navigation.value.forEach((item) => {
    // console.log('watchEffect: ', item.href, route.path, route.path.indexOf(item.href))

    if (route.path.indexOf(item.href) != -1) {
      item.current = true
    } else {
      item.current = false
    }
  })

  // 变更sidebar 
  emit('sidebarOpenChange', sidebarOpen)
})

</script>